import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'
export default class App extends Component {
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '打豆豆', done: false },
      { id: '004', name: '吃饭', done: false },
    ]
  }
  addTodo = (todoObj) => {
    //获取原todos
    const { todos } = this.state
    //追加todo
    const newTodos = [todoObj, ...todos]
    this.setState({
      todos: newTodos
    })
  }
  changeCheck = (id, status) => {
    const { todos } = this.state
    const newTodos = todos.map((current) => {
      if (current.id === id) return { ...current, done: status }
      else return current
    })
    this.setState({
      todos: newTodos
    })
  }
  deleteTodo = (id) => {
    const { todos } = this.state
    const newTodos = todos.filter((current) => {
      return current.id !== id
    })
    this.setState({
      todos: newTodos
    })
  }
  checkAll = (status) => {

    const { todos } = this.state
    todos.forEach((current) => {
      current.done = status
    })
    this.setState({
      todos,
    })
  }
  clearDoneAll = () => {
    const { todos } = this.state
    const newTodos = todos.filter((current) => {
      return !current.done
    })
    this.setState({
      todos: newTodos
    })
  }
  render() {
    const { todos } = this.state

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} changeCheck={this.changeCheck} deleteTodo={this.deleteTodo} />
          <Footer todos={todos} checkAll={this.checkAll} clearDoneAll={this.clearDoneAll} />
        </div>
      </div>
    )
  }
}


